<template>
  <div>
    <!--页头-->
    <el-row>
      <div class="div-breadcrumb">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '' }">&#12288;&#12288;主页</el-breadcrumb-item>
          <el-breadcrumb-item>用户管理</el-breadcrumb-item>
          <el-breadcrumb-item>数据配置</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </el-row>

    <!--数据表-->
    <el-row>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <i class="kfb-icon-list-outline"></i>
          <span>用户列表</span>
        </div>
        <div class="block">
          <el-table
            :data="this.tableData.filter(data=>data.userName.toLowerCase().includes(search.toLowerCase())).slice((currentPage-1)*pageSize,currentPage*pageSize)"
            style="width: 100%"
            ref="utable"
          >
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="left" inline class="user-table-expand">
                  <el-form-item label="用户名">
                    <span>{{ props.row.userName }}</span>
                  </el-form-item>

                  <el-form-item label="电话">
                    <span>{{ props.row.phone }}</span>
                  </el-form-item>

                  <el-form-item label="状态">
                    <span>{{ props.row.status === '0'? '启用':'禁用'}}</span>
                  </el-form-item>
                  <el-form-item label="所属部门">
                    <span>{{ props.row.dept }}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column label="用户名" prop="userName" show-overflow-tooltip></el-table-column>

            <el-table-column
              label="状态"
              prop="status"
              :formatter="(row)=> row.status ==='0'?'启用':'禁用'"
            ></el-table-column>
            <el-table-column label="所属部门" prop="dept" show-overflow-tooltip></el-table-column>
            <el-table-column align="right">
              <template slot="header" slot-scope="scope">
                <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
              </template>
              <template slot-scope="scope">
                <el-button size="mini" @click="handleConfig(scope.$index, scope.row)">数据配置</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            class="pagination"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </el-card>
    </el-row>

    <!--添加用户对话框-->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="40%"
      :close-on-click-modal="false"
      :before-close="dialogClose"
      :inline="true"
    >
      <div style="height:30rem;overflow-y:scroll;">
        <el-tree
          ref="layers"
          :data="distData"
          node-key="_id"
          default-expand-all
          :filter-node-method="filterNode"
          show-checkbox
          :default-checked-keys="selectedDistData"
          :props="defaultProps"
        ></el-tree>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="handleConfirm('form')" size="small">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { save, getDist, configLayers, getLayers } from "@/api/yxwh/sjpz";
import { list } from "@/api/yxwh/xxwh";
import { list4config } from "@/api/yxwh/sjml";
import Clone from "@/utils/clone"; //克隆类

export default {
  name: "index",
  data() {
    return {
      tableData: [], //获取的用户信息集合
      distData: [],
      selectedDistData: [], //选中的权限（用户拥有的）
      form: {}, //添加用户关联的用户表单
      search: "", //查询用户输入的关键字
      dialogVisible: false, //添加用户对话框可见控制
      total: 0, //用户所有条数
      currentPage: 1, //显示的用户当前页
      pageSize: 10, //当前页显示条数
      title: "",
      defaultProps: {
        children: "children",
        label: "name"
      }
    };
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    /**
     *
     * @param item
     * @param query
     */
    filterMethod(query, item) {
      return item.name.indexOf(query) > -1;
    },
    //配置
    handleConfig(index, row) {
      this.title = row.userName + "— 数据配置";
      this.form = Clone.clone(row);
      this.dialogVisible = true;
      this.index = this.pageSize * (this.currentPage - 1) + index;
      this.getDistData();
      this.getHasDistData();
    },
    //用户对话框关闭
    dialogClose(done) {
      done();
    },
    //添加编辑用户时验证
    handleConfirm() {
      //图层 算checked  M目录算halfcheck
     // var checkeds = this.$refs.layers.getCheckedKeys();
      var halfcheck = this.$refs.layers.getHalfCheckedKeys();
      
      var checkedNodes = this.$refs.layers.getCheckedNodes();
      var checkedLayers = checkedNodes.filter(i => i.url).map(i => i._id);
       var checkedDirs = checkedNodes.filter(i => !i.url).map(i => i._id);
       var all = halfcheck.concat(checkedDirs);
      var allchecked = configLayers({
        uid: this.form._id,
        layers: checkedLayers,
        halfLayers: all
      }).then(res => {
        this.$message.success("保存成功!");
        this.dialogVisible = false;
      });
      this.selectedDistData = this.$refs.layers.getCheckedKeys();
    },

    //翻页条数控制
    handleSizeChange(size) {
      this.pageSize = size;
    },
    //翻页控制
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
    },
    //获取所有用户信息
    getData() {
      list({ dist: this.$store.getters.dept }).then(res => {
        this.tableData = res.data; //.filter(item=>item.dept !== this.$store.getters.dept);
        this.total = this.tableData.length;
      });
    },
    //获取数据目录
    getDistData() {
      list4config().then(res => {
        //组织一下数据
        var data = res.data
        this.distData = data.filter(i => {
          if (i.islayer == 0 && i.children.length == 0) {
            i.children = data.filter(item => item.pid === i._id);
          }else{
            i.children = i.children.concat(data.filter(item => item.pid === i._id))
          }
          return i.level == 0;
        });
      });
    },
    //获取该用户所用户的数据
    getHasDistData() {
      getLayers({ uid: this.form._id }).then(res => {
        //组织成树结构
        this.selectedDistData = res.data.layers;
      });
    }
  },
  mounted: function() {
    this.getData();
  }
};
</script>

<style lang="scss" scoped>
.div-breadcrumb {
  border-radius: 4px;
  min-height: 48px;
  background: #99a9bf;
  display: flex;
  align-items: center;
  font-size: 24px;
}

.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 10px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.u-organizationDlg .el-scrollbar {
  height: 200px;
  overflow-x: hidden;
}

.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 10px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.u-organizationDlg .el-scrollbar {
  height: 200px;
  overflow-x: hidden;
}

.user-table-expand {
  font-size: 0;
}

.user-table-expand label {
  width: 90px;
  color: #313bbf;
}

.user-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.el-form-item span {
  float: right;
}
</style>
